<template>
  <div class="card_body">
    <loading v-if="loading"></loading>
    <div class="card_content">
      <div class="header">
        <div class="header_bg" :style="{ backgroundImage:'url(' + list.header + ')'}">
          <div class="headerimg">
            <img :src="list.header" alt="">
          </div>
        </div>
      </div>
      <div class="infomation">
        <div class="name">{{list.name}}</div>
        <div class="phone">{{list.phone}}</div>
        <div class="teamname">{{list.team_name}}</div>
      </div>
      <div class="qrcode">
        <img :src="list.contact_qrcode" alt="">
      </div>
      <div class="info_message">{{list.profile}}</div>
    </div>
    <div class="add_card" @click="showboxmsg()">
      <img src="../img/bot.png" alt="">
    </div>
    <div class="pop_box" v-if="showbox">
      <div class="shade"></div>
      <div class="pop_main">
        <div class="pop_content">
          <div class="pop_child">
            <div class="close_box" @click="closebox()" >
              <img src="../img/close.png" alt="">
            </div>
            <div class="box_img">
              <img src="../img/box_img.png" alt="">
            </div>
            <div class="note_mesg">
              <p>希望定制专属于自己</p>
              <p>的个人名片，使用海量健康知识素材？</p>
              <p>请扫码下面小程序码即刻拥有</p>
            </div>
            <div class="code_img">
              <img src="../img/code_img.jpg" alt="">
            </div>
            <div class="bottom_note">
              健康知识素材库
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../utils/config.js'
import crypt from '../utils/crypto-helper-pkcs7'
import axios from 'axios'
import wx from 'weixin-js-sdk'
import loading from '../components/loading'
export default {
  data () {
    return {
      list: {},
      img: require('../img/header.png'),
      uid: '',
      loading: true,
      tips: '',
      showbox: false
    }
  },
  components: {
    loading
  },
  mounted () {
    this.getlist()
    var _this = this
    var thisurl = window.location.href
    thisurl = crypt.encrypt(thisurl)
    axios.get(config.domain + '/wechat/share/option?url=' + thisurl)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          _this.data = res.data
          console.log('aa:' + res.data)
          var timestamp = JSON.stringify(_this.data.timestamp)
          var nonceStr = JSON.stringify(_this.data.nonceStr)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: _this.data.appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: _this.data.signature, // 必填，签名，见附录1
            jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
          wx.ready(function () {
            wx.hideOptionMenu()
          })
        } else {
          this.$confirm('数据获取失败')
        }
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    getlist () {
      var thisuid = this.$route.query.uid
      console.log(thisuid)
      thisuid = thisuid.replace(/\s/g, '+')
      console.log(thisuid)
      thisuid = crypt.decrypt(thisuid)
      console.log(thisuid)
      var param = {
        uid: thisuid
      }
      var paramjson = JSON.stringify(param)
      console.log(paramjson)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.maketingurl + '?param=' + params)
      .then(res => {
        var response = res.data
        console.log(res)
        if (response.errcode === 200) {
          var resdata = response.data
          this.list = resdata.information
          document.title = this.list.name + '的名片'
          this.tips = resdata.tips
          if (resdata.information.header === '') {
            this.list.header = resdata.information.wx_header
            if (resdata.information.wx_header === '') {
              this.list.header = this.img
            }
          }
          console.log(resdata)
          this.loading = false
        } else {
          // this.$confirm('数据获取失败')
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    showboxmsg () {
      var _this = this
      _this.showbox = true
    },
    closebox () {
      var _this = this
      _this.showbox = false
    }
  }
}
</script>
<style>
html,body{ height: 100%;background: #fff; }
body{ margin: 0; padding: 0; }
.phone,.teamname{ font-size: 16px; }
.card_content{ text-align: center; }
.infomation{ font-size: 15px; margin-top: 15px;    line-height: 1.8; }
.infomation .name{ font-size: 18px; font-weight: bold; }
.info_message{ padding: 20px 30px; color: #bbb; font-size: 15px; }
.scan_note{font-size: 12px; color: #bbb;}
.header_bg{background-size: cover;background-position: center;   border-radius: 0 0 50% 50%;    height: 180px;   width: 110%;    left: -5%;    position: relative; }
.headerimg{ padding: 50px  0 20px 0; }
.headerimg img{width: 60px; height: 60px; border-radius: 50%; border:1px solid #fff;}
.qrcode img{ width: 200px; }
.card_content{  background: #fff;padding-bottom: 50px;}
.source_note{padding:15px 20px 0 20px; font-size: 13px; color: #bbb;text-align: center;}
.header{overflow: hidden;}
.pop_box{    position: fixed;    top: 0;    width: 100%;    height: 100%;}
.shade{    width: 100%;    height: 100%;    position: fixed;    background: rgba(0, 0, 0, 0.38);    text-align: center;}
.pop_main{height: 100%;    display: table;   width: 100%;   text-align: center;}
.pop_content{    display: table-cell;   vertical-align: middle;}
.pop_child{    width: 80%;    position: relative;    display: inline-block;   background: #ffffff;   border-radius: 5px;}
.note_mesg{ text-align: center; line-height: 1.6;font-size: 14px; }
.box_img img{ width: 80px; }
.code_img img{ width: 130px; }
.box_img{ padding: 30px 0 30px 0; }
.code_img{ padding-top: 10px; }
.bottom_note{ font-size: 12px; color: #bbb; padding: 10px 0; }
.add_card img{ width: 100%; }
.add_card{position: fixed;   bottom: 0;   background: #fff;   padding: 10px 0;}
.close_box{    position: absolute;    right: 10px;  top: 10px;}
.close_box img{ width: 23px; }
</style>
